import React, { useState, useMemo } from "react";
import { Route } from "react-router-dom";
import MyNavLink from "@/components/MyNavLink";
import { Button, Table } from "@douyinfe/semi-ui";
import { ColumnProps } from "@douyinfe/semi-ui/lib/es/table";
import useFetchData from "@/hooks/useFetchData";

interface RecordType {
  name: string;
  url: string;
  height: string;
  gender: string;
}

/* const initialData: RecordType[] = [
  { id: 1, name: "徐茂增", age: 28, gender: "男" },
  { id: 2, name: "阙芳芳", age: 27, gender: "女" }
]; */

// const url = https://swapi.dev/api/people/${count};

function About() {
  const [count, setCount] = useState<number>(1);
  const [url] = useState<string>("/api_student/users"); // 使用setupProxy代理

  // 对params做缓存
  const params = useMemo(() => ({ count }), [count]);

  const { loading, data: tableData } = useFetchData<{ count: number }, RecordType[]>({
    url,
    method: "GET",
    params
  });

  const columns: ColumnProps<RecordType>[] = [
    { title: "姓名", dataIndex: "name" },
    { title: "身高", dataIndex: "height" },
    { title: "性别", dataIndex: "gender" }
  ];

  const addCount = () => {
    setCount(count + 1);
  };

  console.log({ tableData });

  return (
    <>
      <h3>About</h3>
      <Button onClick={addCount}>{count}</Button>
      <br />
      <br />
      <Table loading={loading} rowKey="name" bordered columns={columns} dataSource={tableData} />
    </>
  );
}

function Home() {
  return <h3>Home</h3>;
}

const UseFetchData: React.FC = () => {
  return (
    <>
      <h1>测试异步的竞争性</h1>
      <MyNavLink to="/about">About</MyNavLink>
      &nbsp;&nbsp;
      <MyNavLink to="/home">Home</MyNavLink>
      <section>
        <Route path="/about" element={<About />} />
        <Route path="/home" element={<Home />} />
        {/* <Redirect to="/about" /> */}
      </section>
    </>
  );
};
export default UseFetchData;
